// 创建响应式
function reactive(target) {
  if (typeof target !== 'object' || typeof target == null) {
    return target // 不是对象或数组直接返回
  }
  // 代理配置
  const proxyConf = {
    get(targe, key, receiver) {
      // 只处理本身（非原型）的属性
      const ownKeys = Reflect.ownKeys(target)
      if (ownKeys.include(key)) {
        console.log('get', key) // 监听
      }
      const result = Reflect.get(target, key, receiver) // 返回不做处理
      return reactive(result) // 递归调用，这里所做的优化是只在调用到对象深层次的属性时才会触发递归
    },

    set(target, key, val, receiver) {
      // 重复的数组，不处理
      if (val === target[key]) {
        return true;
      }
      const ownKeys = Reflect.ownKeys(target)
      if (ownKeys.include(key)) {
        console.log('set 已有的属性', key) // 监听
      } else {
        console.log('新增的属性', key)
      }
      const result = Reflect.set(target, key, val, receiver)
      console.log('set', key, val)
      return result  // 是否设置成功
    },

    deleteProperty(target, key) {
      const result = Reflect.deleteProperty(target, key)
      console.log('deleteProperty', key)
      return result
    }
  }

  // 生成代理 对象
  const observed = new Proxy(target, proxyConf)
  return observed;
}


// 测试数据
const data = {
  name: 'zhangsan',
  age: 20,
  info: {
    city: 'beijing',
    a: {
      b: {
        c: {
          d: e
        }
      }
    }
  }
}
